<template>
	<view class="tab-hd">
		<view :class="['item', item.state ? 'on' : '' ]" v-for="item in tabItems" :key="item.id" @click="handleTab(item.id)">{{item.name}}</view>
	</view>
	<view class="tab-bd">
		<view class="item">
			<image class="item-l" src="@/static/images/img9.png" mode=""></image>
			<view class="item-r">
				<view class="title">护肤评估报告</view>
				<view class="tips">档案ID：2539693</view>
				<view class="tips">检测时间：2024-10-30 18:10</view>
			</view>
		</view>
		<view class="item">
			<image class="item-l" src="@/static/images/img9.png" mode=""></image>
			<view class="item-r">
				<view class="title">护肤评估报告</view>
				<view class="tips">档案ID：2539693</view>
				<view class="tips">检测时间：2024-10-30 18:10</view>
			</view>
		</view>
		<view class="ft-txt">到底了~</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	let tabItems = ref([
		{
			id: 1,
			state: true,
			name: "当天"
		},
		{
			id: 2,
			state: false,
			name: "近一周"
		},
		{
			id: 3,
			state: false,
			name: "近一个月"
		},
		{
			id: 4,
			state: false,
			name: "近半年"
		},
		{
			id: 5,
			state: false,
			name: "近一年"
		},
	])
	let handleTab = (id) => {
		tabItems.value.forEach((item)=> {
			if(item.id == id){
				item.state = true
			}else{
				item.state = false
			}
		})
	}
</script>

<style lang="scss">
.tab-hd{
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 40rpx 70rpx;
	
	.item{
		font-size: 28rpx;
		color: #888;
		padding-bottom: 16rpx;
		
		&.on{
			color: #333;
			font-weight: bold;
			background: url("@/static/images/bg3.png") no-repeat left 30rpx;
			background-size: 30px;
		}
	}
}
.tab-bd{
	padding: 0 40rpx;
	
	.item{
		padding: 40rpx;
		border-radius: 20rpx;
		background: #fff;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		
		.item-l{
			width: 180rpx;
			height: 180rpx;
			border-radius: 10rpx;
			margin-right: 50rpx;
		}
		.item-r{
			flex: 1;
			.title{
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 30rpx;
			}
			.tips{
				font-size: 24rpx;
				color: #555;
				font-weight: lighter;
				margin-top: 6rpx;
			}
		}
	}
}

.ft-txt{
	font-size: 24rpx;
	color: #888;
	font-weight: lighter;
	text-align: center;
	margin-top: 35rpx;
	padding-bottom: 40rpx;
}
</style>
